<template>
	<view>
		<uNavbar title="品牌岛"></uNavbar>
		<view class="search flex_dq" @click="goSearch">
			<image src="../../static/icon/i_ss.png" mode=""></image>
			<input type="text" placeholder-style="font-size:14px" placeholder="请输入品牌名称" />
		</view>

		<!-- 轮播 -->
		<view class="swipers" v-if="bannerList.length>0">
			<u-swiper :list="bannerList" keyName="image_path" height="165" circular autoplay radius="10"
				bgColor="transparent"></u-swiper>
		</view>
		<view class="follow flex_Z">
			<view class="follow_l flex_ld">
				<text>我的关注</text>
				<view class="follow_r flex_dq" @click="goFollow">
					<text class="f28 c4">更多</text>
					<u-icon name="arrow-right" color="#ffffff60" size="18"></u-icon>
				</view>
			</view>
			<view class="follow_box">
				<view v-if="followListS.length>0">
					 <scroll-view  scroll-x="true">
						<view class=" flex_dq">
							<view class="myFollow_box flex_dq"  v-for="(item, index) in followListS" :key="index" @click="goBrand(item.brand_id)">
									<image class="logos" :src="item.brand.logo" mode="aspectFill"></image>
									<text class="overflow1">{{item.brand.name}}</text>
									<image class="fbg" src="../../static/icon/i_fbg.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="follow_box_r" v-else>
					<image  src="../../static/image/gz.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="brand_list flex_ld">
			<text>品牌列表</text>
			<text class="f28 c2" @click="changSQ">申请入驻+</text>
		</view>
		<view class="brands flex_Z" v-for="(item,index) in brandInfo" :key="index" @click="goNextPage(item.id)">
			<!-- <image class="mask" :src="item.background_image" mode="aspectFill"></image> -->
			<view class="brands_tit flex_dq">
				<image :src="item.logo" mode="aspectFill"></image>
				<view class=" flex_Z">
					<view class="brandsName ">
						<text>{{item.name}}</text>
					</view>
					<view class="fans_box">
						<text class="zlz">粉丝:{{item.fans_number}}</text>
					</view>
				</view>
			</view>
			<view class="brands_bg flex_c">
				<image class="bg6" :src="item.thumb" mode="aspectFill"></image>
			</view>
			<view class="brands_btm flex_Z">
				<!-- <text>{{item.brand_abbr}}</text> -->
				<text>{{item.brand_info}}</text>
			</view>
		</view>
		<view class="empty3"></view>
		<u-popup :show="tipShow" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f32">添加平台客服即可申请入驻</text>
				<image :src="info.weChat_image" mode=""></image>
				<view class="prompt_ntm flex_ZC">
					<text class="f28 c4" v-if="!fictitiousState">截图微信扫一扫添加</text>
					<text class="f28 c4" v-else >微信扫一扫添加</text>
					<!-- #ifdef H5 -->
					<view class="empty3"></view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<text @click="isDownload">保存</text>
					<!-- #endif -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {brandAll,sliderList,followList} from "../../api/store.js";
	import {myservice} from "../../api/setting.js"
	export default {
		data() {
			return {
				avatar: '../../static/image/logo.png',
				list2: [],
				bannerList: [], //轮播图
				brandInfo: [], //品牌列表
				tipShow: false, //弹窗
				indicator:true,
				fictitiousState:false,
				info: {},
				followListS:[]
			}
		},
		onLoad() {
			console.log(uni.getStorageSync('fictitiousState'));
			this.fictitiousState = uni.getStorageSync('fictitiousState')
			this.initIndex()
			this.getinfo()
		},
		onShow() {
			this.myFollowList()
			this.isBrand()
		},
		methods: {
			// 轮播、列表 集成接口
			initIndex() {
				let data = {
					type:3
				}
				sliderList(data).then(res => {
					console.log(res);
					if(res.code == 1){
						this.bannerList = res.data
					}
				})
			},
			// 我的关注
			myFollowList() {
				followList().then(res => {
					console.log('11111',res)
					if(res.code == 1){
						this.followListS = res.data.data
						console.log(this.followListS.length);
					}
				})
			},
			// 初始化
			isBrand() {
				brandAll().then(res => {
					console.log(res)
					this.brandInfo = res.data
				})
			},
			// 申请入驻
			changSQ() {
				this.tipShow = true
			},
			// 客服
			getinfo() {
				myservice().then(res => {
					this.info = res.data
					console.log(res)
				})
			},
			// 去详情
			goNextPage(id) {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/brandHomepage?id=' + id
				})
			},
			// 去关注
			goFollow(){
				uni.navigateTo({
					url:'/pagesMy/brandCenter/myFollow'
				})
			},
			// 去品牌详情
			goBrand(id){
				console.log(id);
				uni.navigateTo({
					url: '/pagesMy/brandCenter/brandHomepage?id=' + id
				})
			},
			// 保存
			isDownload() {
				uni.showLoading({
					title: "保存中...",
					icon: "loading",
				});
				uni.saveImageToPhotosAlbum({
					filePath: this.info.weChat_image,
					success: function(res) {
						uni.hideLoading();
						uni.$u.toast('保存成功');
						console.log(res);
						this.tipShow = false
					},
				});
			},
			left() {
						console.log('left');
					},
					right() {
						console.log('right');
					},
			goSearch() {
				uni.navigateTo({
					url: '/pagesMy/brandCenter/serachBrand'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		background: #322D59;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}

	.search>image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 40rpx 0 26rpx;
	}

	.search::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 80rpx;
		transform: translateX(-50%);
		height: 36rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.search>input {
		color: #ffffff;
	}

	.swipers {
		width: 688rpx;
		margin: 0 auto;
	}

	.brands {
		position: relative;
		width: 690rpx;
		height: 276rpx;
		/* border: 2rpx solid rgba(130, 121, 227, 0.4); */
		margin: 92rpx auto 0;
		border-radius: 40rpx 0 0 0;
		background: #322D59;
	}

	.follow {
		width: 688rpx;
		margin: 0 auto;
	}

	.follow_l>text {
		font-size: 36rpx;
		color: #ffffff;
		margin: 40rpx 0 36rpx 0;
		font-weight: 500;
	}

	.follow_box {
		width: 626rpx;
		margin: 10rpx auto 30rpx;
		/* background: pink; */
	}
	.follow_box_r{
		width: 626rpx;
		margin: 10rpx auto 30rpx;
	}

	.follow_box_r>image {
		width: 626rpx;
		height:90rpx;
	}

	.myFollow_box{
		position: relative;
		width: 270rpx;
		height: 104rpx;
		background: #322D59;
		border-radius: 80rpx;
		font-size: 30rpx;
		color: #ffffff;
		margin: 0 10rpx;
	}
	.logos{
		width: 72rpx;
		height: 72rpx;
		margin: 0 20rpx;
		border-radius: 50%;
		border: 4rpx solid #ffffff80;
	}
	.myFollow_box>text{
		width: 150rpx;
	}
	.fbg{
		position: absolute;
		top: 16rpx;
		left: 130rpx;
		width: 98rpx;
		height: 78rpx;
	}

	.brand_list {
		width: 688rpx;
		margin: 0 auto;
	}

	.brand_list>text:nth-child(1) {
		font-size: 36rpx;
		color: #ffffff;
		margin: 40rpx 0 36rpx 0;
		font-weight: 500;
	}


	.mask {
		position: absolute;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
		filter: blur(6rpx)
	}

	.brands_bg {
		position: absolute;
		top: -36rpx;
		right: 0;
		width: 199rpx;
		height: 309rpx;
		background: linear-gradient(274deg, rgba(0, 20, 255, 0.5) 0%, rgba(128, 32, 239, 0.5) 50%, rgba(255, 44, 223, 0.5) 100%);
		border-radius: 18rpx;
		z-index: 8;
	}

	.bg6 {
		width: 98%;
		height: 98%;
		border-radius: 16rpx;
	}

	.brands_tit {
		width: 100%;
		margin: 32rpx;
	}

	.brands_tit>text {
		font-size: 32rpx;
		color: #ffffff;
	}

	.brands_tit>image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.brandsName {
		position: relative;
		color: #ffffff;
	}

	.brandsName>text:nth-child(1) {
		font-weight: 700;
	}

	.brandsName>text:nth-child(2) {
		width: 70rpx;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		margin-top: 10rpx;
	}

	.fans_box {
		/* background: pink; */
	}

	.zlz {
		width: 70rpx;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		margin-top: 10rpx;
		color: #ffffff;
	}

	.brands_btm {
		width: 100%;
		height: 124rpx;
		background: #393466;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-size: 28rpx;
		color: #ffffff;
		padding: 14rpx 0 0 40rpx;
		z-index: 9;
	}

	.brands_btm>text {
		margin-top: 10rpx;
		margin-right:20rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	/* 	.brands_btm>text:nth-child(2){
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:1; 
		overflow:hidden; 
	} */

	.prompt {
		width: 100%;
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt>image {
		width: 376rpx;
		height: 376rpx;
		border-radius: 40rpx;
		margin: 60rpx 0;
	}

	.prompt_ntm {
		margin-top: 40rpx;
	}

	.prompt_ntm>text:nth-child(2) {
		font-size: 30rpx;
		width: 270rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
		margin-top: 80rpx;
		margin-bottom: 120rpx;
	}
</style>